<template>
	<view class="container">
		<!-- 顶部展示图 -->
		<view class="top-show">
			<image mode="widthFix" class="top-show-img" src="/static/images/banner.jpg"></image>
		</view>

		<view class="bottom-show">
			<!-- 未登录面板 -->
			<view v-if="!userStore.token" class="user-container section" @click="toLoginPage">
				<view class="avatar-container">
					<image src="/static/images/avatar.png"></image>
					<view class="no-login">
						<text class="ellipsis">未登录</text>
						<text>点击授权登录</text>
					</view>
				</view>
			</view>

			<!-- 登录以后得面板 -->
			<view v-else class="user-container section">
				<view class="avatar-container">
					<image :src="userStore.userInfo.headimgurl"></image>
					<view class="no-login">
						<text class="ellipsis">{{userStore.userInfo.nickname}}</text>
					</view>
				</view>
				<view class="setting">
					<navigator url="/pages/settings/settings"> 设置 </navigator>
				</view>
			</view>

			<!-- 订单面板 -->
			<view class="order section">
				<view class="order-title-wrap">
					<text class="title">我的订单</text>
					<text class="more">查看更多></text>
				</view>

				<view class="order-content-wrap">
					<view class="order-content-item" v-for="(item,index) in initpanel" :key="index">
						<navigator :url="`${ userStore.token ? item.url : '/pages/login/login' }`">
							<view class="iconfont" :class="item.iconfont"></view>
							<text>{{item.title}}</text>
						</navigator>
					</view>
				</view>
			</view>
			<!-- 关于售前售后服务面板 -->
			<view class="after-scale section">
				<view class="order-title-wrap">
					<text class="title">关于售前售后服务</text>
				</view>
				<view class="after-scale-item">
					<view class="iconfont icon-kefufenxiermaikefu"></view>
					<text>可与小程序客服实时聊天或电话咨询</text>
				</view>
				<view class="after-scale-item">
					<view class="iconfont icon-shijian"></view>
					<text>小程序客服工作时间为: 8:30 ~ 20:30</text>
				</view>
				<view class="after-scale-item">
					<view class="iconfont icon-dizhiguanli"></view>
					<text>鲜花制作完毕情况下暂不支持退款</text>
				</view>
				<view class="after-scale-item">
					<view class="iconfont icon-zhangben"></view>
					<text>鲜花可以提前7-15天预订重大节假日不支持定时配送</text>
				</view>
				<view class="after-scale-item">
					<view class="iconfont icon-zhangben"></view>
					<text>测试内容溢出留白问题测试内容溢出留白问题</text>
				</view>
			</view>

			<!-- 底部面板 -->
			<view class="info-footer"> 线子技术支持 </view>
		</view>
	</view>

</template>

<script setup>
	import useUserStore from '@/store/modules/user.js'

	let userStore = useUserStore()
	let initpanel = ref([{
			url: '/modules/orderPayModule/pages/order/list/list',
			title: '商品订单',
			iconfont: 'icon-dingdan'
		},
		{
			url: '/modules/orderPayModule/pages/order/list/list',
			title: '礼品卡订单',
			iconfont: 'icon-lipinka'
		},
		{
			url: '/modules/orderPayModule/pages/order/list/list',
			title: '退款/售后',
			iconfont: 'icon-tuikuan'
		}
	]) // 我的订单初始化数据

	// 登录
	const toLoginPage = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0rpx !important;
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow-y: scroll;
		background:
			linear-gradient(to top, transparent, #ffffff 90%),
			linear-gradient(to right, #D2EEF9, #FFD1DE),
		;

		.top-show {
			width: 100%;
			height: 360rpx;

			.top-show-img {
				width: 100%;
				height: 100%;
			}
		}

		.bottom-show {
			width: 96%;
			position: absolute;
			margin: 0 16rpx;

			.section {
				background-color: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
			}

			.user-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: -86rpx;
				color: #999;

				.avatar-container {
					display: flex;
					align-items: center;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.no-login {
						display: flex;
						flex-direction: column;
						font-size: 24rpx;

						text:first-child {
							font-size: 28rpx;
						}

						.ellipsis {
							width: 400rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}
			}

			.order {
				background-color: #fff;
				margin-top: 20rpx;

				.order-title-wrap,
				.order-content-wrap {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
				}

				.order-title-wrap {
					.title {
						color: #444;
						// font-weight: 700;
					}

					.more {
						color: #ccc;
						font-size: 24rpx;
					}
				}

				.order-content-wrap {
					display: flex;

					.iconfont {
						font-size: 60rpx;
						text-align: center;
					}

					text {
						font-size: 25rpx;
						margin-top: 20rpx;
					}
				}

				.order-content-item {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}

			.after-scale {
				margin-top: 30rpx;

				.order-title-wrap {
					line-height: 50rpx;
				}

				.after-scale-item {
					display: flex;
					margin: 25rpx 15rpx;
					color: #999;
					line-height: 50rpx;

					text {
						font-size: 25rpx;
						margin-left: 20rpx;
					}

					.iconfont {
						color: #a2b364;
					}
				}
			}

			.info-footer {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #aaa;
				font-size: 25rpx;
			}
		}
	}
</style>